<template>
  <div class="vue-component">
    <h1 class="title">Stylus in Vue</h1>
    <div class="container">
      <button class="btn">点击我</button>
      <div class="content">
        <p>测试内容</p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'StylusTest',
    data() {
      return {
        message: 'Hello Vue!'
      }
    }
  }
</script>

<!-- CSS 样式 -->
<style>
  .vue-component {
    max-width: 1200px;
    margin: 0 auto;
  }

  /* 错误：重复选择器 */
  .vue-component {
    padding: 20px;
  }

  .title {
    color: #007bff;
    font-size: 24px;
  }

  /* 错误：命名颜色 */
  .content p {
    color: red;
    margin-top: 10px;
  }

  /* 错误：vendor 前缀 */
  .container {
    transform: scale(1);
    display: flex;
  }
</style>

<!-- Stylus 样式 -->
<style lang="stylus">
  primary-color = #007bff
  spacing = 10px

  .stylus-section
    padding spacing

    // 错误：变量命名不规范
    invalidVarName = 20px
    margin-bottom invalidvarname

    &__header
      color primary-color

      // 嵌套过深
      & > .item
        font-weight bold

        &-text
          font-style italic

          &:hover
            color darken(primary-color, 10%)

    // mixin使用
    button-style(color)
      background-color color
      padding spacing
      border-radius 4px

    .btn
      button-style(primary-color)
</style>
